<template>
    <div class="folder-list">
        <ul>
            <li v-for="item in list" :key="item.id">

                <img src="@/assets/images/files/files-folder-view.png" alt="">

                <strong v-text="item.folder_name"></strong>
                <span>{{ item.quantity }} files</span>

                <a @click="openFolder(item)"></a>

                <button :folder-id="item.id">
                    <svg viewBox="0 0 24 24" version="1.1">
                        <circle cx="7" cy="12" r="1.5"></circle>
                        <circle cx="12" cy="12" r="1.5"></circle>
                        <circle cx="17" cy="12" r="1.5"></circle>
                    </svg>
                </button>

                <div class="folder-list-option" :class="{active: active == item.id}">
                    <span @click="$emit('edit', item)">
                        <svg-icon name="user-template-edit" />
                        <em>Rename</em>
                    </span>

                    <span @click="remove = item">
                        <svg-icon name="user-files-remove" />
                        <em>Delete</em>
                    </span>
                </div>

            </li>
        </ul>

        <UxDialog :visible="remove" @close="remove = null">
            <div class="remove-folder">
                <img src="@/assets/images/files/dialog-folder-del.png" alt="">
                <p>All pictures contained in the folder will be deleted and cannot be recovered. Are you sure you want to delete this folder?</p>
                <button @click="remove = null" type="primary">Cancel</button>
                <button @click="removeFolder(remove)">Confirm</button>
                <UxLoading2 :loading="loading" />
            </div>
        </UxDialog>
    </div>
</template>
<script>
export default {
    name: "MyPopverImageItem",
    props: {
        list: { type: Array, default: () => [] },
        title: { type: String, default: "" },
    },
    data () {
        return {
            remove: null,
            loading: false,
            active: 0,
        };
    },
    methods: {
        openFolder (item) {
            this.active = 0;
            this.$emit("open", item);
        },

        onClick (event) {
            const button = event.target.closest('.folder-list button')
            if (button) {
                const id = parseInt(button.getAttribute('folder-id')) || 0
                event.stopPropagation();
                event.preventDefault();
                if (this.active == id) {
                    this.active = 0
                } else {
                    this.active = id
                }
            } else if (event.target.closest('.folder-list-option')) {
                // 对话框中的，不管
                event.stopPropagation();
                event.preventDefault();
            } else {
                this.active = 0
            }

        },
        async removeFolder (item) {
            this.loading = true;
            this.active = 0;
            let index = this.list.indexOf(item);
            let res = await this.$http("Material.delMaterialFolder/" + item.id);
            if (res.code === 0) {
                this.$uxMessage.success("Folder deleted successfully");
                this.list.splice(index, 1);
                this.loading = false;
                this.remove = null;
            } else {
                this.$uxMessage.warning('Failed to delete folder');
                this.loading = false;
            }
        },
    },
    mounted () {
        window.addEventListener('click', this.onClick)
    },
    beforeDestroy () {
        window.removeEventListener('click', this.onClick)
    }
};
</script>
<style lang="scss" scoped>
.folder-list {
    flex: 1;
    position: relative;

    ul {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px;
    }
    li {
        width: calc(20% - 20px);
        height: 128px;
        box-sizing: border-box;
        margin: 10px;
        padding: 18px 14px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e5e5e5;
        position: relative;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        transition: all 0.2s;

        img {
            width: 40px;
            height: 28px;
        }

        & > strong {
            margin-top: 20px;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #212121;
            line-height: 16px;
            height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        & > span {
            margin-top: 4px;
            font-size: 12px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 400;
            color: #087196;
            line-height: 14px;
        }

        & > a {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        & > button {
            position: absolute;
            right: 12px;
            top: 18px;
            width: 28px;
            height: 28px;
            background: transparent;
            border-radius: 6px;
            border: none;
            text-align: center;
            padding: 0;
            svg {
                width: 24px;
                height: 24px;
                fill: #292929;
            }

            &:hover {
                background: #f2f2f2;
            }
        }

        .folder-list-option {
            position: absolute;
            right: 12px;
            top: 48px;
            width: 126px;
            height: 76px;
            background: #ffffff;
            box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
            border-radius: 8px;
            border: 1px solid #ebebeb;
            display: flex;
            flex-direction: column;
            padding: 6px;
            box-sizing: border-box;
            line-height: 32px;
            display: none;
            span {
                padding: 0 8px;
                font-size: 14px;
                color: #555555;
                display: flex;
                border-radius: 6px;
                cursor: pointer;
                align-items: center;
                font-size: 14px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #555555;

                svg {
                    width: 16px;
                    height: 16px;
                    stroke: #757575;
                    margin-right: 6px;
                    box-sizing: border-box;
                }

                &:hover {
                    background: #f6f6f6;
                }

                &:nth-child(1) svg {
                    padding: 0.5px;
                }
            }

            &.active {
                display: block;
            }
        }

        &:hover {
            box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.12);
            cite {
                display: flex;
            }
        }
    }
}

.remove-folder {
    width: 320px;
    height: 414px;
    box-sizing: border-box;
    padding: 60px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;

    & > img {
        width: 80px;
        height: 80px;
    }

    p {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 16px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 22px;
    }

    & > button {
        margin-top: 8px;
        width: 100%;
        height: 38px;
        min-height: 38px;
    }
}
</style>
